<template>
  <div class="page">
    <div class="page-search">
      <van-row type="flex" justify="space-between" class="mid">
        <van-col span="18" class="mid">
          <van-search
            class="w100"
            clearable
            v-model="searchData.search"
            shape="round"
            background="#f2f2f2"
            placeholder="请输入"
            @search="onRefresh"
          />
        </van-col>
        <van-col span="6" offset="" class="mid">
          <div class="page-search-option" @click="moduleAction('childrenAdd')">
            <div class="w100">添加</div>
          </div>
        </van-col>
      </van-row>
    </div>
    <div class="page-list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-empty v-show="dataList.length <= 0" description="" />
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check="false"
          :error.sync="errorLoading"
          error-text="请求失败，点击重新加载"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="page-list-item"
            v-for="(item, index) in dataList"
            :key="index"
            @click="itemAction(item, index)"
          >
            <div class="page-list-item-inner mid">
              <div class="del mid" @click.stop="delAction(item)">
                <van-icon
                  class="del-icon"
                  name="cross"
                  color="#ffffff"
                  size="20"
                />
              </div>
              <van-row type="flex" justify="space-between" class="w100">
                <van-col span="20" offset="1" class="">
                  <van-row type="flex" justify="start" class="w100">
                    <van-col span="24" class="mid bold">
                      {{ item.name }}
                    </van-col>
                  </van-row>
                  <div class="desc">{{ item.card_no }}</div>
                </van-col>
                <van-col span="2" offset="1" class="mid">
                  <img :src="url.icon_arrow_right" height="16" width="8" alt="箭头" />
                </van-col>
              </van-row>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>

    <div class="bottom-bar">
      <van-button
        class="bottom-bar-btn"
        block
        size="large"
        color="#D58913"
        type="info"
        text="修改信息"
        @click="moduleAction('parentEdit')"
      />
    </div>
  </div>
</template>

<script>
import { delParentsStudent, getStudentList } from '@/api/school'

export default {
  data() {
    return {
      url: {
        icon_arrow_right: require('../../assets/images/school/icon_arrow_golden.png'),
      },
      route: {},
      page: {
        num: 1,
        total: 0,
      },
      searchData: {},
      loading: true,
      errorLoading: false,
      finished: false,
      refreshing: false,
      dataList: [],
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.route = this.$route.query
    this.init()
  },
  methods: {
    init() {
      if (!this.route.parent_id) {
        this.$toast('缺少参数')
        return
      }
      this.loading = true
      this.onLoad()
    },
    moduleAction(type) {
      switch (type) {
        case 'parentEdit':
          this.$router.push({
            path: '/school/parent',
            query: {
              parent_id: this.route.parent_id,
            },
          })
          break
        case 'childrenAdd':
          this.$router.push({
            path: '/school/children',
            query: {
              parent_id: this.route.parent_id,
            },
          })
          break
      }
    },
    delAction(item) {
      this.$dialog
        .confirm({
          title: '是否确认删除',
          message: '',
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          confirmButtonColor: '#D58913',
          beforeClose: async (action, done) => {
            if (action === 'confirm') {
              const param = {
                parent_id: item.parent_id,
                student_id: item.student_id,
              }
              // console.log('最终提交信息', param)
              const insertData = await delParentsStudent(param)
              if (insertData.data.errcode == 0) {
                this.$toast('操作成功')
                setTimeout(() => {
                  this.onRefresh()
                }, 500)
                done()
              } else {
                this.$toast(insertData.data.errmsg)
                done()
              }
            } else {
              done()
            }
          },
        })
        .catch(() => {})
    },
    itemAction(item, index) {
      this.$router.push({
        path: '/school/healthNew',
        query: {
          type: 'children',
          parent_id: item.parent_id,
          student_id: item.student_id,
        },
      })
    },
    getListAction() {
      const data = {
        pageNo: this.page.num,
        pageSize: 20,
        parent_id: this.route.parent_id,
        search: this.searchData.search,
      }
      getStudentList(data).then((ret) => {
        const data = ret.data
        if (data.errcode === 0) {
          this.dataList.push(...data.data.results)
          this.page.total = data.data.totalRecord
          this.page.num += 1
          if (data.data.pageNo >= data.data.totalPage) {
            this.finished = true
          }
        } else {
          this.errorLoading = true
        }
        this.loading = false
      })
    },
    onRefresh() {
      document.querySelector('html').scrollTop = '0'
      // 清空列表数据
      this.finished = false
      this.refreshing = true
      // 重新加载数据
      this.loading = true
      this.page.num = 1
      this.onLoad()
    },
    onLoad() {
      // 异步更新数据
      // if (this.userInfo.cardNo) {
      if (this.refreshing) {
        this.dataList = []
        this.page.num = 1
        this.refreshing = false
      }
      this.getListAction()
      // } else {
      //   this.loading = false
      // }
    },
  },
}
</script>

<style lang="less" scoped>
.page {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  color: black;
  position: relative;

  /deep/.van-search__content--round {
    border-radius: 10px;
  }
  /deep/.van-search__content {
    background-color: #fff;
  }

  &-search {
    width: 100%;

    &-option {
      border-radius: 10px;
      background-color: #fff;
      box-sizing: border-box;
      width: 100%;
      height: auto;
      padding: 5px;
      margin-right: 10px;
      text-align: center;
      font-size: 16px;
      color: #898989;
    }
  }

  &-list {
    box-sizing: border-box;
    width: 100%;
    height: 85vh;
    overflow: auto;

    & > :not(:last-child) {
      border-bottom: 1px solid #ededed;
    }

    &-item {
      margin-bottom: 20px;

      &-inner {
        margin: 15px 10px;
        padding: 20px;
        min-height: 80px;
        text-align: left;
        border-radius: 20px;
        background: #fff;
        position: relative;
        overflow: hidden;

        .del {
          position: absolute;
          right: -5px;
          top: -5px;
          background-color: #ff9100;
          border-bottom-left-radius: 20px;
          width: 40px;
          height: 40px;

          &-icon {
            margin-left: 7px;
            margin-top: 2px;
          }
        }

        .desc {
          margin-top: 10px;
          font-weight: 400;
          font-size: 20px;
          text-align: left;
          color: #b4b4b4;
        }
      }
    }
  }

  .bottom-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}
</style>
